<template>
  <div class="header">
    <div class="header-top">
      <div class="title">
        野兽派狂欢派对
      </div>
      <div class="search">
        <span class="iconfont search-icon">&#xe623;</span>
        <input class="search-input" type="text" name="" readonly="readonly" placeholder="请搜索">
      </div>
    </div>
    <div class="nav">
      <router-link to="/" class="nav-s recommend active">
        <div class="iconfont nav-icon">&#xe6d5;</div>
        <div class="nav-font">推荐</div>
      </router-link>
      <div class="nav-s Choose">
        <div class="iconfont nav-icon">&#xe612;</div>
        <div class="nav-font">选购</div>
      </div>
      <div class="nav-s shoppingCart">
        <div class="iconfont nav-icon">&#xe726;</div>
        <div class="nav-font">购物车</div>
      </div>
      <div class="nav-s me">
        <div class="iconfont nav-icon">&#xe60d;</div>
        <div class="nav-font">我</div>
      </div>
      <div class="nav-s card">
        <div class="iconfont nav-icon">&#xe604;</div>
        <div class="nav-font">野兽心意卡</div>
      </div>
    </div>
    <div class="banner">
      <img class="banner-img" src="../../../../static/img/banner.png">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
.header
  padding: 0 .40rem
  .header-top
    position: fixed
    top: 0
    left: 0rem
    right: 0rem
    z-index: 2
    background: #fff
    padding: 0 .3rem .4rem .4rem
    box-sizing: border-box
    .title
      height: .86rem
      line-height: .86rem
      font-weight: bold
      font-size: .36rem
    .search
      line-height: .68rem
      position: relative
      .search-icon
        position: absolute
        left: .1rem
      .search-input
        line-height: .68rem
        width: 100%
        background: #eee
        border-radius: .1rem
        padding-left: .6rem
        box-sizing: border-box
  .nav
    position: fixed
    z-index: 3
    bottom: 0
    left: 0
    right: 0
    padding-top: .1rem
    text-align : center
    display: flex
    border-top: 1px solid #888
    background: #fff
    .active
      color: #0a7553
    .nav-s
      flex-grow: 1
      line-height: .52rem
      .nav-icon
        height: .52rem
        font-size: .46rem
      .nav-font
        height: .52rem
        font-size: .26rem
  .banner
    padding-top: .98rem
    height: 100%
    padding-bottom: 0.4rem;
    .banner-img
      width: 100%
</style>
